<template>
    <div class="Login">
		<div class="section">
			<div class="section-left">
				<img src="../assets/img/logoBg.png" />
			</div>
			<div class="section-right">
				<p class="section-right-title">欢迎登录</p>
				<div class="message-list">
                    <div class="message-list-item">
                        <el-icon :size="16"><User /></el-icon>
                        <el-input placeholder="请输入账号" v-model="userName" clearable></el-input>
                    </div>
					<div class="message-list-item">
                        <el-icon :size="16" ><Lock /></el-icon>
                        <el-input type="password" placeholder="请输入密码" show-password v-model="passWord" clearable></el-input>
                    </div>
					<div class="login-btn">
						<!-- <p>
							<span v-if="errorMsg">{{errorMsg}}</span>
						</p> -->
						<el-button class="login-opera" @click="Login">登&nbsp;录</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
    
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import { User, Lock } from "@element-plus/icons";
import { UserLogin } from '../utils/api/index.js'
const router = useRouter();
const userName = ref('');
const passWord = ref('');
const Login = async () => {
	if(userName.value == '' && passWord.value == '') return;
	let loginRes = await UserLogin({
		username: userName.value,
		password: passWord.value
	})
	if(loginRes.code == 200) {
		sessionStorage.token = loginRes.data.token;
		router.push('/')
	} else if(loginRes.code == 100) {
		ElMessage({
            message: loginRes.msg,
            type: 'error',
        })
	}

	
}
onMounted(() => {

})
</script>
    
<style scoped lang="scss">
.Login {
    width: 100vw;
    height: 100vh;
	color: #323232;
	background-color: #eff2f5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.section{
		width: 50vw;
		height: 55vh;
		background-color:rgba(255,255,255,.2);
		box-shadow:
            7px 7px 12px rgba(0, 0, 0, .2),
						-7px -7px 12px rgba(0, 0, 0, .2);
		display: flex;
		&-left{
			flex: 6;
			>img{
				width: 100%;
				height: 100%;
			}
		}
		&-right{
			flex: 4;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: #ffffff;
			&-title{
                text-align: center;
				font-weight: bold;
                font-size: 40px;
				margin: 0 0 50px;
			}
			.message-list{
				display: flex;
				flex-direction: column;
				padding: 0 36px;
				box-sizing: border-box;
				.message-list-item {
					display: flex;
					align-items: center;
					margin: 0 0 10px;
					padding: 0 15px;
					border: 1px solid #DCDFE6;
					border-radius: 4px;
					.el-input{
						:deep .el-input__wrapper{
							box-shadow: none;
						}
					}
				
				}
				.login-btn{
					margin: 40px 0 0;
					display: flex;
					align-items: center;
					justify-content: center;
					.login-opera{
						width: 100%;
						margin: 0 20px;
						background: #006BF8;
						color: #FFFFFF;
						font-weight: 500;
					}
					.register-opera{
						width: 50%;
						margin: 0 10px;
						background: #006BF8;
						color: #FFFFFF;
						font-weight: 500;
					}
					.goBack-opera{
						width: 50%;
						margin: 0 10px;
						font-weight: 500;
					}
				}
			}
		}
		
	}
}
</style>